<template>
	<view class="sa-home-item" @click="clickPlayerItem(itemData.Id)">
		<view class="play-card-left"><view class="play-card-left-img" :style="{ backgroundImage: 'url( ' + itemData.HeadImg + ' )' }"></view></view>
		<view class="play-card-right">
			<view class="nick-name">
				{{ itemData.NickName }}
				<view class="play-score" v-if="itemData.Score > 0">好评率：{{ itemData.Score }}星</view>
			</view>
			<view class="right-card-bottom">
				<view>
					<text class="play-hourlywage">{{ itemData.HourlyWage }}</text>
					<text class="play-hourlywageunit">{{ itemData.SeverPlayHourlyWageUnitStr }}</text>
				</view>
				<view>
					<text v-if="itemData.IsWork" class="play-working">在线</text>
					<text v-else class="play-no-working">{{ itemData.WorkDescr }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import play_level_icon from '@/static/images/play-level-icon.png';
import star from '@/static/images/star.png';
import praise_heart from '@/static/images/praise-heart.png';
export default {
	name: 'yuewanItem',
	props: {
		itemData: {
			HeadImg: {
				type: String,
				default: ''
			},
			HourlyWage: {
				type: String,
				default: ''
			},
			Score: {
				type: String,
				default: ''
			},
			LikeCount: {
				type: String,
				default: ''
			},
			NickName: {
				type: String,
				default: ''
			},
			Levels: {
				type: String,
				default: ''
			},
			SeverPlayHourlyWageUnitStr: {
				type: String,
				default: ''
			}
		}
	},
	data() {
		return {
			playLevelIcon: play_level_icon,
			praiseHeart: praise_heart,
			star: star
		};
	},
	methods: {
		clickPlayerItem(item_id) {
			this.$parent.parentClickPlayer(item_id);
		}
	}
};
</script>

<style scoped lang="scss">
.sa-home-item {
	position: relative;
	width: 100%;
	height: 216rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.16);
	overflow: hidden;
	background-color: #fff;
	display: flex;
}

.play-card-left {
	width: 216rpx;
	height: 216rpx;
	margin-right: 20rpx;
	&-img {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
}
.play-card-right {
	padding: 30rpx 20rpx 30rpx 0;
	width: calc(100% - 246rpx);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.nick-name {
		font-family: 'SourceHanSansCN-Medium';
		font-size: $main-text-size-32;

		.play-score {
			margin-top: 4rpx;
			font-size: $main-text-size-28;
			color: $main-text-color-grey;
			font-family: 'SourceHanSansCN-Regular';
		}
	}

	.right-card-bottom {
		display: flex;
		justify-content: space-between;

		.play-hourlywage {
			color: $main-text-color-main-orange;
			font-size: $main-text-size-32;
			font-family: 'SourceHanSansCN-Medium';
		}

		.play-hourlywageunit {
			color: $main-text-color-gray-33;
			font-size: $main-text-size-24;
		}

		.play-working {
			color: #01b219;
			font-size: $main-text-size-24;
		}
		.play-no-working {
			color: #c8c8c8;
			font-size: $main-text-size-24;
		}
	}
}
</style>
